<template>
  <section>
    <div class="tb-r-filter-bar">
      <ul class=" tb-taglist am-avg-sm-4">
        <li class="tb-taglist-li tb-taglist-li-current">
          <div class="comment-info">
            <span>全部评价</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-1">
          <div class="comment-info">
            <span>好评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li-0">
          <div class="comment-info">
            <span>中评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>

        <li class="tb-taglist-li tb-taglist-li--1">
          <div class="comment-info">
            <span>差评</span>
            <span class="tb-tbcr-num">(32)</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>

    <ul class="am-comments-list am-comments-list-flip">
      <li class="am-comment" v-for="(comment, index) in comments.rows">
        <!-- 评论容器 -->
        <a href="javascript:;">
          <img class="am-comment-avatar"
               :src="comment.userAvatar">
          <!-- 评论者头像 -->
        </a>

        <div class="am-comment-main">
          <!-- 评论内容容器 -->
          <header class="am-comment-hd">
            <!--<h3 class="am-comment-title">评论标题</h3>-->
            <div class="am-comment-meta">
              <!-- 评论元数据 -->
              <a href="#link-to-user"
                 class="am-comment-author">{{comment.username}}</a>
              <!-- 评论者 -->
              评论于
              <time datetime="">{{comment.date}}</time>
            </div>
          </header>

          <div class="am-comment-bd">
            <div class="tb-rev-item "
                 data-id="255776406962">
              <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                {{comment.content}}
              </div>
              <div class="tb-r-act-bar">
                {{comment.itemSpec}}
              </div>
            </div>

          </div>
          <!-- 评论内容 -->
        </div>
      </li>

    </ul>

    <div class="clear"></div>

    <div id="comments-page"></div>
    <div class="clear"></div>
    <div class="tb-reviewsft">
      <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#"
           target="_blank">购物保障</a>，明确您的售后保障权益。</div>
    </div>

    <!--分页
    <ul class="am-pagination am-pagination-right">
      <li class="am-disabled"><a href="#">«</a></li>
      <li class="am-active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">»</a></li>
    </ul>
    <div class="clear"></div>
    -->

  </section>
</template>

<script>

export default {
  name: 'item-comments',
  mounted () {
    this.initPagination(10)
  },
  updated () {
    console.log('update。。。')
  },
  data () {
    return {
      comments: {
        rows: [
          {
            username: 'b***1 (匿名)',
            userAvatar: '/static/images/hwbn40x40.jpg',
            date: '2015年11月02日 17:46',
            content: '摸起来丝滑柔软，不厚，没色差，颜色好看！买这个衣服还接到诈骗电话，我很好奇他们是怎么知道我买了这件衣服，并且还知道我的电话的！',
            itemSpec: '颜色分类：柠檬黄  尺码：S'
          },
          {
            username: 'b***1 (匿名)',
            userAvatar: '/static/images/hwbn40x40.jpg',
            date: '2015年11月02日 17:46',
            content: '摸起来丝滑柔软，不厚，没色差，颜色好看！买这个衣服还接到诈骗电话，我很好奇他们是怎么知道我买了这件衣服，并且还知道我的电话的！',
            itemSpec: '颜色分类：柠檬黄  尺码：S'
          },
          {
            username: 'b***1 (匿名)',
            userAvatar: '/static/images/hwbn40x40.jpg',
            date: '2015年11月02日 17:46',
            content: '摸起来丝滑柔软，不厚，没色差，颜色好看！买这个衣服还接到诈骗电话，我很好奇他们是怎么知道我买了这件衣服，并且还知道我的电话的！',
            itemSpec: '颜色分类：柠檬黄  尺码：S'
          },
          {
            username: 'b***1 (匿名)',
            userAvatar: '/static/images/hwbn40x40.jpg',
            date: '2015年11月02日 17:46',
            content: '摸起来丝滑柔软，不厚，没色差，颜色好看！买这个衣服还接到诈骗电话，我很好奇他们是怎么知道我买了这件衣服，并且还知道我的电话的！',
            itemSpec: '颜色分类：柠檬黄  尺码：S'
          }
        ],
        total: 100,
        page: 1,
        pageSize: 10,
        pages: 10
      }
    }
  },
  methods: {
    initPagination (pages) {
      let $ = this.$
      let self = this
      $('#comments-page').page({
        pages: pages,
        first: '首页',
        last: '尾页',
        prev: '«',
        next: '»',
        groups: 5,
        before: function (context, next) {
          if (!context.first) {
            // load comments
            self.getComments(context.option.curr)
          }
          next()
        }
      })
      $('.am-pagination').addClass('am-pagination-right')
    },
    getComments (page) {
      console.log(`加载第${page}页数据`)
    }
  }
}
</script>

<style lang="less" scoped>
  ul {
    text-align: right !important;
  }
</style>
